async function fn() {
  let movies;
  let operas;
  let types;
  await $.ajax({
    url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllOperas',
    success(data) {
      operas = data.operas;
    }
  });
  await $.ajax({
    url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllTypes',
    success(data) {
      types = data.types;
    }
  });
  await $.ajax({
    url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllMovies',
    success(data) {
      movies = data.movies;
    }
  });
  $(function () {
    // 1.给所有的kx或yx设置点击事件
    var seatHtmls = document.querySelectorAll(".kx,.yx");
    //依次给座位添加点击代码
    for (var i = 0; i < seatHtmls.length; i++) {
      seatHtmls[i].onclick = function () {
        let loginUser = localStorage.getItem("loginUser");
        if (loginUser) {
          if ($(this).attr("class") != "ys") {
            if ($(".selected li").length < 5) {
              var isShow = true;//控制是否显示几排几列   
              let movie = movies.find(movie => movie.id == info[1]);
              let ticke = $(".selected li").length;
              $("#movie-total").text(movie.price * (ticke + 1));
              //可以使用 this 来指代被点击的标签
              // 1. 切换样式
              var classname = this.getAttribute("class");
              if (classname != "ys") {
                if (classname == 'yx') {
                  this.setAttribute("class", 'kx');
                  //删除
                  isShow = false;
                } else {
                  this.setAttribute("class", 'yx');
                  //添加
                  isShow = true;
                }
                // 2 . 得到座位的排数和列数
                var dl = this.parentElement.parentElement;
                var lineClass = dl.getAttribute("class");
                var line = lineClass.substr(7);//第几排
                //第几列
                var seats = document.querySelectorAll(`.row${line} .kx,.row${line} .yx,.row${line} .ys`)
                var column;
                //通过遍历找到this在seats中的下标，下标+1就是列数
                for (var i = 0; i < seats.length; i++) {
                  if (this == seats[i]) {
                    column = i + 1;
                    break;
                  }
                }
                var seatStr = `${line}排${column}列`;

                //根据开关变量来判断是新增-true还是删除
                if (isShow) {
                  //添加ol标签，放入 列表中
                  var li = document.createElement("li");
                  li.innerText = seatStr;
                  // 清空列表
                  $(".selected p").remove();
                  //放入列表中
                  document.querySelector(".selected").appendChild(li);
                } else {
                  //删除
                  //遍历所有ol，判断,
                  var lis = document.querySelectorAll(".selected li");
                  for (var i = 0; i < lis.length; i++) {
                    if (lis[i].innerText == `${line}排${column}列`) {
                      //删除
                      lis[i].parentElement.removeChild(lis[i]);
                      break;
                    }
                  }
                }
              }
            } else {
              alert("一次最多选5个座位");
            }
          } else {
            alert("不能选择已出售的页面");
          }
        }else{
          alert("请先登录");
        }
      }
    }

    // 立即购票
    $("#gopay").on('click', function () {
      loginUser = localStorage.getItem("loginUser");
      if (loginUser) {

        let chooseSeat = localStorage.getItem("chooseSeat");
        chooseSeat = [];
        $(".selected li").each(function (index, value) {
          // 改变颜色
          var nums = $(value).text().split(/[排列]/);
          var line = nums[0];
          var column = nums[1]
          var div = $(`.row${line}`).find('.kx,.ys,.yx').eq(column - 1);
          div.attr("class", "ys");

          // 保存颜色
          chooseSeat.push($(value).text());
          localStorage.setItem("chooseSeat", chooseSeat.join(","));
          $(".selected li").remove();
          location.assign(`../html/pay.html${location.search}`);


        });
        let info = location.search.split("id=");
        let loginUser = localStorage.getItem("loginUser");
        let order = localStorage.getItem("order");
        loginUser = JSON.parse(loginUser);
        order = JSON.parse(order);
        let movie = movies.find(movie => movie.id == info[1]);
        let opera = operas.find(opera => opera.id == info[2]);
        order.movie = movie.title;
        order.opera = opera.name;
        order.price = $("#movie-total").text();
        order.movieImgSrc = movie.imgSrc;

        let orderId = parseInt(Math.random()*22000000000);
        console.log(orderId);
        order.orderId = ++orderId;
        if (!loginUser.order) {
          loginUser.order = [];
        }
        loginUser.order.push(order);
        localStorage.setItem("order", JSON.stringify(order));
        localStorage.setItem("loginUser", JSON.stringify(loginUser));
      } else {
        alert("请先登录");
      }
    });




    // 获得颜色
    var saveSeat = localStorage.getItem("saveSeat");
    if (saveSeat != null) {
      saveSeat = saveSeat.split(",");
      saveSeat.map(function (value) {
        var nums = value.split(/[排列]/);
        var line = nums[0];
        var column = nums[1];
        var div = $(`.row${line}`).find('.kx,.ys,.yx').eq(column - 1);
        div.attr("class", "ys");
      });
    }

    let info = location.search.substr(1).split("id=");
    function render() {
      let movie = movies.find(movie => movie.id == info[1]);
      let opera = operas.find(opera => opera.id == info[2]);
      let newType = "";
      let sticke = $(".selected li").length;
      let order = JSON.parse(localStorage.getItem("order"));
      movie.movieType.forEach(movietype => {
        let type = types.find(type => type.id == movietype);
        newType += `${type.name} `
      });
      if (movie.price == undefined) {
        movie.price = 999;
      }
      // 侧边栏信息动态加载
      $("#phone").before($(
        `<div class="movie-text">
          <img src="${movie.imgSrc}" alt="">
          <div>
              <h3>${movie.title}</h3>
              <p>类型 :<span>${newType}</span></p>
              <p>时长：<span>${movie.duration}</span></p>
          </div>
      </div>
      <p>影院：<span>${opera.name}</span></p>
      <p>影厅：<span>${order.movieClass}</span></p>
      <p>版本 :<span>${movie.language}</span></p>
      <p>场次 :<i>今天 8月11 19:30</i></p>
      <p>票价 : <span class="movie-price">￥${movie.price}/张</span></p>
      <p>座位：一次最多选5个座位</p>
      <ul class="selected">
          <!-- 新增li标签 -->
          <p>请<i>点击左侧</i>座位图选择座位</p>
      </ul>
      <span>总价 :<em>￥</em><b id="movie-total">0</b></span>`
      ));
    }

    render();
  });
}
fn();